<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"
        contentType="text/html"
        renderKitId="PRIMEFACES_MOBILE">

    <pm:page title="Notes">

        <!-- Main View -->
        <pm:view id="main" swatch="e">
            <pm:header title="Notes">
                <f:facet name="right"><p:button value="New" icon="plus" href="#new" /></f:facet>
            </pm:header>

            <pm:content>
                <h:form id="listNotesForm">
                    <p:dataList id="notesList" value="#{notesView.notes}" var="note" type="inset">
                        <p:column>
                            <p:commandLink value="#{note.shortText}" update=":newNoteForm:noteText" action="pm:new">
                                <f:setPropertyActionListener value="#{note}" target="#{notesView.note}" />
                            </p:commandLink>
                        </p:column>
                    </p:dataList>
                </h:form>
            </pm:content>

        </pm:view>

        <!-- New Notes -->
        <pm:view id="new" swatch="e">
            <pm:header title="New Note">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true" /></f:facet>
            </pm:header>

            <pm:content>
                <h:form id="newNoteForm">
                    <p:inputTextarea id="noteText" value="#{notesView.note.text}" />

                    <p:separator />

                    <p:commandButton value="Save" action="#{notesView.save}" update="noteText :listNotesForm:notesList" icon="check" />

                </h:form>
            </pm:content>

        </pm:view>

    </pm:page>

</f:view>

